<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>进度条 - 页面元素</title>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row">
   <h3>常规用法</h3>
   <p>我们进度条提供了两种尺寸及多种颜色的显示风格，其中颜色的选值可参考：背景色公共类。</p>
   <div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="20%"></div>
   </div>
  </div>
  <div class="layui-row layui-col-space15">
   <div class="layui-col-md12">
    <h3>显示进度文本</h3>
    <p>通过对父级元素设置属性 lay-showPercent="yes" 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）</p>
    <div class="layui-progress" lay-showPercent="yes">
     <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
    </div>
   </div>
  </div>
  <div class="layui-row">
   <div class="layui-col-md12">
    <h3>大号进度条</h3>
    <div class="layui-progress layui-progress-big" lay-showPercent="yes">
     <div class="layui-progress-bar" lay-percent="30%"></div>
    </div>
    <div class="layui-progress layui-progress-big">
     <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
    </div>

    <div class="layui-progress layui-progress-big" lay-showPercent="true">
     <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
    </div>
   </div>
  </div>
  <div class="layui-row ">
   <h3>进度条动态操作</h3>
   <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
   </div>

   <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
    <button class="layui-btn site-demo-active" data-type="setPercent" id="setPercent">设置 50%</button>
    <button class="layui-btn site-demo-active" data-type="loading" id="loading">模拟 loading</button>
   </div>
  </div>
 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var form = layui.form,
    $ = layui.jquery,
    element = layui.element;
   element.render();


   //触发事件
   var active = {
    setPercent: function () {
     //设置50%进度
     element.progress('demo', '50%')
    }
    , loading: function (othis) {
     var DISABLED = 'layui-btn-disabled';
     if (othis.hasClass(DISABLED)) return;

     //模拟loading
     var n = 0, timer = setInterval(function () {
      n = n + Math.random() * 10 | 0;
      if (n > 100) {
       n = 100;
       clearInterval(timer);
       othis.removeClass(DISABLED);
      }
      element.progress('demo', n + '%');
     }, 300 + Math.random() * 1000);

     othis.addClass(DISABLED);
    }
   };

   $('.site-demo-active').on('click', function () {
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
   });



  });
 </script>
</body>

</html>